<template>
    <div v-loading="loading" class="detail-container">
        <div class="header-container">
            <div class="header-box">
                <div class="contract-info">
                    <div class="title">
                        <span class="name">{{ info.name }}</span>
                        <span v-if="info.status === 2" class="status color-blue"><i class="el-icon-lock"></i><span> 已锁定</span></span>
                        <span v-if="info.status === 1" class="status color-yellow"><i class="el-icon-unlock"></i><span> 未锁定</span></span>
                    </div>
                    <div class="des">
                        <div class="item">
                            <span class="label">类型：</span>
                            <span class="value">{{ info.typeName }}</span>
                        </div>
                        <div class="item">
                            <span class="label">施工单位：</span>
                            <span class="value">{{ info.contractorName }}</span>
                        </div>
                        <div class="item">
                            <span class="label">监理单位：</span>
                            <span class="value">{{ info.supervisorName }}</span>
                        </div>
                    </div>
                </div>
                <div class="buttons">
                    <BaseButton v-show="info.status === 1" v-permission="{ btnCode: 'dlyh_d429_e22_2' }" type="second" @click="handleDelete">删除</BaseButton>
                    <BaseButton v-show="info.status === 1" v-permission="{ btnCode: 'dlyh_d429_e23_2' }" @click="handleLock">锁定工程</BaseButton>
                    <BaseButton v-show="info.status === 2" v-permission="{ btnCode: 'dlyh_d429_e26_2' }" type="second" @click="handleWasteProject">废置工程</BaseButton>
                    <BaseButton v-show="info.status === 2" v-permission="{ btnCode: 'dlyh_d429_e25_2' }" type="second" @click="handleChangeDesign">变更设计</BaseButton>
                    <BaseButton v-show="info.status === 2" v-permission="{ btnCode: 'dlyh_d429_e24_2' }" @click="handleAddPrice">新增单价</BaseButton>
                </div>
            </div>

            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-if="buttonsRights.has('dlyh_d429_e27_2')" label="工程概况" name="1"></el-tab-pane>
                <el-tab-pane v-if="buttonsRights.has('dlyh_d429_e28_2')" label="清单汇总" name="2"></el-tab-pane>
                <el-tab-pane v-if="buttonsRights.has('dlyh_d429_e29_2')" label="工程量清单" name="3"></el-tab-pane>
                <el-tab-pane v-if="buttonsRights.has('dlyh_d429_e30_2')" label="计日工清单" name="4"></el-tab-pane>
                <el-tab-pane v-if="info.status === 2 && buttonsRights.has('dlyh_d429_e39_2')" label="清单变更记录" name="5"></el-tab-pane>
                <el-tab-pane label="操作日志" name="6"></el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="activeName === '1'" class="golobal-button">
            <BaseButton v-show="info.status === 1" v-permission="{ btnCode: 'dlyh_c88_d430_2' }" @click="handleEdit">编辑</BaseButton>
        </div>
        <ContractInfo v-if="activeName === '1'" :info="info"></ContractInfo>
        <ListSummary v-if="activeName === '2'"></ListSummary>
        <!-- type=1:普通工程量清单；type=2:计日工 -->
        <BillOfQuantities v-if="activeName === '3'" key="1" :type="1" :is-lock="info.status === 2" :premission-code="buttonsRights"></BillOfQuantities>
        <BillOfQuantities v-if="activeName === '4'" key="2" :type="2" :is-lock="info.status === 2" :premission-code="buttonsRights"></BillOfQuantities>
        <ChangeRecord v-if="activeName === '5'"></ChangeRecord>
        <OperationLog v-if="activeName === '6'"></OperationLog>
    </div>
</template>

<script>
import reconfirm from '@/utils/reconfirm'
import storage from 'good-storage'

import ContractInfo from './components/ContractInfo'
import ListSummary from './components/ListSummary'
import BillOfQuantities from './components/BillOfQuantities/index.vue'
import ChangeRecord from './components/ChangeRecord'
import OperationLog from './components/OperationLog'
import { ProjectLedgerModel } from '@/models'
import { RoadRangeOptions } from '@/views/maintenance-decision/constants'
import { EngineeringTypeOptions } from '../../../constants'

export default {
    components: {
        ContractInfo,
        ListSummary,
        BillOfQuantities,
        OperationLog,
        ChangeRecord
    },
    data() {
        return {
            loading: true,
            activeName: storage.session.get('tabIndex') || '1',            
            model: new ProjectLedgerModel(),
            roadRangeOptions: RoadRangeOptions,
            info: {},
            id: ''
        }
    },
    computed: {
        buttonsRights() {
            return this.$store.getters['user/pageRights']
        }
    },
    created () {
        this.id = this.$route.query.id || ''
        this.getDetail(this.id)
    },
    methods: {
        getDetail(id) {
            this.model.detail({ id }).then(res => {
                const filesUrl = res.filesUrl ? JSON.parse(res.filesUrl) : []
                const date = res.startDate + ' ~ ' + res.endDate
                const typeName = EngineeringTypeOptions.find(item => item.value === res.type).label
                const highway = res.highwayName + '(' + res.highwayCode + ')'
                const budgetAmount = res.budgetAmount + '万元'
                this.info = {
                    ...res,
                    filesUrl,
                    date,
                    typeName,
                    highway,
                    budgetAmount
                }
            }).finally(() => {
                this.loading = false
            })
        },
        handleClick() {
            // 每次切换时缓存在本地，用于跳转回退时显示
            storage.session.set('tabIndex', this.activeName)
        },
        handleDelete() {
            reconfirm({
                text: '删除后无法恢复，请谨慎操作!',
                title: '确定删除养护工程',
                type: 'error',
                callback: () => this.delete()
            })
        },
        delete() {
            return this.model.delete({ ids: [this.id] }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功！',
                    duration: 500,
                    onClose: () => {
                        this.$router.go(-1)
                    }
                })
            })
        },
        handleLock(id) {
            const text = `
            锁定工程后：</br>
            1、可基于已维护的工程发起计量操作；</br>
            2、工程的以下信息将锁定，不支持再次编辑，请确认工程内容正确后再发起操作；</br>
                <ul style="list-style: disc;margin-left: 36px;">
                    <li>工程概况</li>
                    <li>工程量清单</li>
                    <li>计日工清单</li>
                </ul>
            <span style="color: red;">3、工程锁定后，不支持取消锁定，请谨慎操作！</span>
            `
            reconfirm({
                text,
                title: '锁定工程',
                confirmButtonText: '确认工程内容正确，锁定',
                dangerouslyUseHTMLString: true,
                callback: () => this.lock()
            })
        },
        lock() {
            return this.model.lock({ id: this.id }).then(() => {
                // 直接手动修改状态，不再调用详情接口
                this.info.status = 2
                this.$message.success('锁定成功!')
            })
        },
        handleAddPrice() {
            this.$router.push({ name: 'ProjectLedgerUnitPriceAdd', query: { id: this.id }})
        },
        handleWasteProject() {
            this.$router.push({ name: 'ProjectLedgerWasteProjectAdd', query: { id: this.id }})
        },
        handleChangeDesign() {
            this.$router.push({ name: 'ProjectLedgerChangeDesignAdd', query: { id: this.id }})
        },
        handleEdit() {
            this.$router.push({
                path: './edit',
                query: {
                    id: this.id,
                    type: 'edit'
                }
            })
        },
    },
        
}
</script>

<style lang="scss" scoped>
.el-container {
    overflow-y: auto;
}
.detail-container {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    position: relative;
    overflow-y: scroll;
    padding: 4px;
    
    &::-webkit-scrollbar {
    display: none;
    }
    ::v-deep .el-tabs__nav-wrap::after {
        background-color: transparent;
    }
    .header-container {
        box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.2);
        padding: 12px;
    }
    ::v-deep .body {
        box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.2);
        padding: 12px;
        margin-top: 16px;
        min-height: 300px;
        word-break: break-all;
    }
    .parting-line {
        width: 100%;
        height: 8px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    .header-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .contract-info {
        font-size: 16px;
        flex: 1;
        margin-right: 24px;
        max-width: 60%;
        .title {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }
        .name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: bold;
        }
        .status {
            display: inline-block;
            width: 90px;
            font-size: 14px;
            padding-left: 16px;
            flex-shrink: 0;
        }
    }
    .des {
        display: flex;
        justify-content: space-between;
    }
    .item {
        margin-bottom: 24px;
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        .label {
            color: #171725;
            flex-shrink: 0;
        }
        .value {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #44444f;
        }
    }
    .buttons {
        flex-shrink: 0;
    }
}
.golobal-button {
    margin: 8px 12px;
    text-align: right;
}
</style>
